<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

</head>

<body>

    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" title="West" style="width:200px;">
            <ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>
        </div>
    </div>



</body>

</html>
<script>
    $('#tt').tree({
        url: 'http://localhost:3000/cate/tree/1',
        method: 'get',
        onClick: function (node) {
            console.log(node);
            dgInit(node._id);
        }
    });
    function dgInit(cateId) {
        var queryParams = {};

        if (cateId) {
            var queryParams = Object.assign(queryParams, {
                cateId: cateId
            })
        }
        $('#dg').datagrid({
            url: 'http://localhost:3000/news/list',
            fit: true,
            pagination: true,
            pageSize: 5,
            method: 'post',
            pageList: [5, 10, 20, 30, 40, 50],
            queryParams: queryParams,
            columns: [[
                { field: 'ck', checkbox: true },
                { field: 'title', title: '标题', width: 100 },
            ]]
        });
    }

    dgInit();
</script>